header{
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.36rem;
  border-bottom: 1px solid #f0f0f0;
}
.title{
  font-size: 0.32rem;
  text-align: center;
  padding:0.4rem 0;
  color: #646464;
}
.type{
  color: #67a3cc;
  text-align: center;
  font-size: 0.32rem;
  height: 1.2rem;
}
.chioces_container{
  display: flex;
  justify-content: center;
  color: #646464;
}
.chioces_container ul{
  width: 5rem;  
}
.chioces_container ul li{
  height: 0.66rem;
  line-height: 0.66rem;
  font-size: 0.32rem;
  text-align: center;
  width: 100%;
  background-color: #f0f0f0;
  margin-bottom: 0.6rem;
  border-radius: 5px;
}
.chioces_container ul .active{
  background-color: #d5eeff;
}
.list-container,.fixed{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  height: 100%;
  width: 100%;
  z-index: 100;
}
.list-content{
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.list-content li{
  float: left;
  font-size: 0.26rem;
  width: 20%;
  text-align: center;
  height: 0.54rem;
  line-height: 0.54rem;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 0.3rem;
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6rem;
  margin-left: -3rem;
  margin-top: -3.75rem;
  height: 7.5rem;
  font-size: 0.3rem;
  background-color: #fff;
  border-radius: 10px;
}
.content h6{
  text-align: center;
  font-size: 0.34rem;
  width: 5.6rem;
  margin: 0 auto;
  height: 1.2rem;
  line-height: 1.2rem;
  color: #646464;
}
.content .introduct{
  box-sizing: border-box;
  padding: 0 0.6rem;
  color: #646464;
  text-indent:2em;
}
#cancle{
  position: absolute;
  right: 15px;
  top: 6px;
  width: 0.5rem;
  height: 0.5rem;
  background: url(../images/cancle.png) no-repeat;
  background-size: 0.5rem 0.5rem;
}
#button{
  background-color: #ff895d;
  width: 3.3rem;
  height: 0.6rem;
  border-radius: 6px;
  text-align: center;
  line-height: 0.6rem;
  color: #fff;
  margin: 0 auto;
  margin-top: 0.6rem;
}
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height:1rem;
  background-color: #d5eeff;
  line-height: 1rem;
}
.footer .show-all{
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  margin-top: -0.25rem;
  right: 1.5rem;
  background: url(../images/6.png);
  background-size: 0.5rem 0.5rem;
  vertical-align: middle;
}
.footer .list{
  position: absolute;
  height: 100%;
  width: 1.3rem;
  right: 0;
  top: 0;
  font-size: 0.34rem;
  color: #323232;
}
.list-content .show-all{
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 0.26rem;
  right: 1.5rem;
  background: url(../images/6.png);
  background-size: 0.5rem 0.5rem;
  vertical-align: middle;
}
.active-type{
  color: #03b0ff;
  background-color: #d5eeff;
  border:1px solid #73c2e6;
}
.show-all-container{
  height: 1rem;
  line-height: 1rem;
}
.list-content .list-num{
  position: absolute;
  height: 1rem;
  width: 1.3rem;
  right: 0;
  top: 0;
  font-size: 0.34rem;
  color: #323232;
  line-height: 1rem;
}
.discontent{
  width: 5rem;
  height: 2.84rem;
  box-sizing: border-box;
  padding: 0.25rem;
  margin: 0 auto;
  border:1px solid #ccc;
}
.discontent:empty:before{
  content: attr(placeholder);
  color:#bbb;
}
.discontent:focus:before{
  content:none;
}
@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation: bounceInDown 0.8s;
  animation: bounceInDown 0.8s;
};
